import React from 'react'
import MyCss from './index.module.scss'
import { Link,withRouter } from 'react-router-dom'
import ImgText from '../../components/ImgText'

class My extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            myOrder: [],
            myBuy: [],
            other: [],
            thisUser:{}
        }
    }
    render() {
        return (
            <div className={MyCss.main}>
                {/* 头部 */}
                <div className={MyCss.header}>
                    <img src="https://my.m.vsigo.cn/static/images/btn_SZ.png" alt="" />
                </div>
                {/* 内容 */}
                <div className={MyCss.content}>
                    {/* 用户头部 */}
                    <div className={MyCss.userBox}>
                        <img src="https://my.m.vsigo.cn/static/images/iocn_tx.png" alt="" />
                        {
                            !this.state.thisUser.phone?<p onClick={this.skip.bind(this,{par:"LOGIN",to:"/login"})}>登录账号&gt;</p>:<p>{this.state.thisUser.phone}</p>
                        }
                        
                    </div>
                    {/* 订单 */}
                    <div className={MyCss.myOrder}>
                        <div onClick={this.skip.bind(this,{par:"ORDER",to:""})} className={MyCss.orderTitle}>
                            <p>我的订单</p>
                            <span>全部订单&gt;</span>
                        </div>
                        <div className={MyCss.order}>
                            {
                                this.state.myOrder.length > 0 &&
                                this.state.myOrder.map((item, index) => {
                                    return (
                                        <Link to="/my" key={index}>
                                            <ImgText {...item}></ImgText>
                                        </Link>
                                    )
                                })
                            }

                        </div>
                    </div>
                    {/* 拼购 */}
                    <div className={MyCss.myBuy}>
                        <div onClick={this.skip.bind(this,{par:"BUY",to:""})} className={MyCss.buyTitle}>
                            <p>我的拼购</p>
                            <span>全部&gt;</span>
                        </div>
                        <div className={MyCss.buy}>
                            {this.state.myBuy.length > 0 &&
                                this.state.myBuy.map((item, index) => {
                                    return (
                                        <Link to="/my" key={index}>
                                        <ImgText {...item}></ImgText>
                                    </Link>
                                    )
                                })
                            }
                        </div>
                    </div>
                    {/* 其他 */}
                    <div className={MyCss.other}>
                        {this.state.other.length > 0 &&
                            this.state.other.map((item, index) => {
                                return (
                                    <Link to="/my" key={index}>
                                    <ImgText {...item}></ImgText>
                                </Link>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
    skip=(e)=>{
        // console.log(this.props.location.pathname)
        localStorage.setItem("pathName",this.props.location.pathname)
        switch (e.par) {
            case "LOGIN":
                this.props.history.push("/login")
                break;
            case "ORDER":
                console.log("订单页未开通")
                break;
            case "BUY":
                console.log("拼购页未开通")
                break;
            default:
                break;
        }
    }
    componentDidMount = () => {
        let excThisUser = localStorage.getItem("thisUser")?JSON.parse(localStorage.getItem("thisUser")):{}
        this.setState({
            thisUser:excThisUser
        })
        // console.log(excThisUser)
        let data = {
            "myOrder": [
                {
                    "title": "待付款",
                    "img": "https://my.m.vsigo.cn/static/images/icon_dfk.png",
                    "link": "/my"
                },
                {
                    "title": "代发货",
                    "img": "https://my.m.vsigo.cn/static/images/icon_dfh1@2x.png",
                    "link": "/my"
                },
                {
                    "title": "待收货",
                    "img": "https://my.m.vsigo.cn/static/images/icon_dsh.png",
                    "link": "/my"
                },
                {
                    "title": "待评价",
                    "img": "https://my.m.vsigo.cn/static/images/icon_dpj.png",
                    "link": "/my"
                },
                {
                    "title": "售后",
                    "img": "https://my.m.vsigo.cn/static/images/icon_sh.png",
                    "link": "/my"
                }
            ],
            "myBuy": [
                {
                    "title": "开团中",
                    "img": "https://my.m.vsigo.cn/static/images/icon_ktz@2x.png",
                    "link": "/my"
                },
                {
                    "title": "参团中",
                    "img": "https://my.m.vsigo.cn/static/images/icon_ctz@2x.png",
                    "link": "/my"
                },
                {
                    "title": "完成拼购",
                    "img": "https://my.m.vsigo.cn/static/images/icon_wcpg@2x.png",
                    "link": "/my"
                }
            ],
            "other": [
                {
                    "title": "我的奖品",
                    "img": "https://my.m.vsigo.cn/static/images/icon_wddj@2x.png",
                    "link": "/my"
                },
                {
                    "title": "物流信息",
                    "img": "https://my.m.vsigo.cn/static/images/icon_wlxx@2x.png",
                    "link": "/my"
                },
                {
                    "title": "收货地址",
                    "img": "https://my.m.vsigo.cn/static/images/iocn_shdz@2x.png",
                    "link": "/my"
                },
                {
                    "title": "邀请有奖",
                    "img": "https://my.m.vsigo.cn/static/images/icon_yqyj@2x.png",
                    "link": "/my"
                },
                {
                    "title": "会员成长",
                    "img": "https://my.m.vsigo.cn/static/images/iocn_hycz@2x.png",
                    "link": "/my"
                },
                {
                    "title": "我的资产",
                    "img": "https://my.m.vsigo.cn/static/images/iocn_wdzc@2x.png",
                    "link": "/my"
                },
                {
                    "title": "消息盒子",
                    "img": "https://my.m.vsigo.cn/static/images/iocn_xxhz@2x.png",
                    "link": "/my"
                },
                {
                    "title": "我的收藏",
                    "img": "https://my.m.vsigo.cn/static/images/iocn_wdsc@2x.png",
                    "link": "/my"
                },
                {
                    "title": "我的客服",
                    "img": "https://my.m.vsigo.cn/static/images/icon_wdkf@2x.png",
                    "link": "/my"
                },
                {
                    "title": "价格保护",
                    "img": "https://my.m.vsigo.cn/static/images/iocn_jgbh@2x.png",
                    "link": "/my"
                }
            ]
        }
        this.setState({
            myOrder: data.myOrder,
            myBuy: data.myBuy,
            other: data.other
        })

    }
    componentWillUnmount() {

        // 卸载异步操作设置状态
        this.setState = (state, callback) => {
            return;
        }
    }
}
export default withRouter(My)